/**
 * slider插件可悬停控制
 */

$(function () {
    var bannerSlider = new Slider($('#banner_tabs'), {
      time: 5000,
      delay: 400,
      event: 'hover',
      auto: false,
      mode: 'fade',
      controller: $('#bannerCtrl'),
      activeControllerCls: 'active'
    });
    $('#banner_tabs .flex-prev').click(function () {
      bannerSlider.prev()
    });
    $('#banner_tabs .flex-next').click(function () {
      bannerSlider.next()
    });

    // 攻击类卡牌轮播
    var attackSlider = new Slider($('#attackSlider'), {
        time: 5000,
        delay: 400,
        event: 'hover',
        auto: false,
        mode: 'fade',
        controller: $('#bannerCtrl'),
        activeControllerCls: 'active'
      });
      $('#attackSlider .flex-prev').click(function () {
        attackSlider.prev()
      });
      $('#attackSlider .flex-next').click(function () {
        attackSlider.next()
      });
      
      // 防御轮播
      var defanseSlider = new Slider($('#defanseSlider'), {
          time: 5000,
          delay: 400,
          event: 'hover',
          auto: false,
          mode: 'fade',
          controller: $('#bannerCtrl'),
          activeControllerCls: 'active'
      });
      $('#defanseSlider .flex-prev').click(function () {
        defanseSlider.prev()
      });
      $('#defanseSlider .flex-next').click(function () {
        defanseSlider.next()
      });

      // 控制轮播
      var controlSlider = new Slider($('#controlSlider'), {
          time: 5000,
          delay: 400,
          event: 'hover',
          auto: false,
          mode: 'fade',
          controller: $('#bannerCtrl'),
          activeControllerCls: 'active'
      });
      $('#controlSlider .flex-prev').click(function () {
        controlSlider.prev()
      });
      $('#controlSlider .flex-next').click(function () {
        controlSlider.next()
      });


        // 查看指定卡牌详情
        $(".attack-list .cartlist li").on("click", function(){
            var idx = $(".attack-list .cartlist li").index(this)
            var length = $(".attack-list .cartlist li").length
            if(idx>0 && idx !=1){
                idx = idx-1
            }else if(idx == 1){
                idx = length-1
            }
            $(".carddetails").fadeIn()
            $("#attackSlider").fadeIn()
            $("#defanseSlider").fadeOut()
            $("#controlSlider").fadeOut()
            attackSlider.triggerPlay(idx)
        })

        // 查看指定卡牌详情
        $(".defanse-list .cartlist li").on("click", function(){
            var idx = $(".defanse-list .cartlist li").index(this)
            var length = $(".defanse-list .cartlist li").length
            idx = idx -1 
            console.log(idx)
            $(".carddetails").fadeIn()
            $("#attackSlider").fadeOut()
            $("#defanseSlider").fadeIn()
            $("#controlSlider").fadeOut()
            defanseSlider.triggerPlay(idx)
        })

        // 查看指定卡牌详情
        $(".control-list .cartlist li").on("click", function(){
            var idx = $(".control-list .cartlist li").index(this)
            var length = $(".control-list .cartlist li").length
            if(idx>0){
                idx = idx-1
            }else if(idx == 0){
                idx = length-1
            }
            console.log(idx)
            $(".carddetails").fadeIn()
            $("#attackSlider").fadeOut()
            $("#defanseSlider").fadeOut()
            $("#controlSlider").fadeIn()
            controlSlider.triggerPlay(idx)
        })






  })



 $(function ($, window, document, undefined) {



    
    Slider = function (container, options) {
        /*
        options = {
            auto: true,
            time: 3000,
            event: 'hover' | 'click',
            mode: 'slide | fade',
            controller: $(),
            activeControllerCls: 'className',
            exchangeEnd: $.noop
        }
        */

        "use strict"; //stirct mode not support by IE9-

        if (!container) return;

        var options = options || {},
            currentIndex = 0,
            cls = options.activeControllerCls,
            delay = options.delay,
            isAuto = options.auto,
            controller = options.controller,
            event = options.event,
            interval,
            slidesWrapper = container.children().first(),
            slides = slidesWrapper.children(),
            length = slides.length,
            childWidth = container.width(),
            totalWidth = childWidth * slides.length;

        function init() {
            var controlItem = controller.children();

            mode();

            event == 'hover' ? controlItem.mouseover(function () {
                stop();
                var index = $(this).index();

                play(index, options.mode);
            }).mouseout(function () {
                isAuto && autoPlay();
            }) : controlItem.click(function () {
                stop();
                var index = $(this).index();

                play(index, options.mode);
                isAuto && autoPlay();
            });

            isAuto && autoPlay();
        }

        //animate mode
        function mode() {
            var wrapper = container.children().first();

            options.mode == 'slide' ? wrapper.width(totalWidth) : wrapper.children().css({
                'position': 'absolute',
                'left': 0,
                'top': 0
            })
                .first().siblings().hide();
        }

        //auto play
        function autoPlay() {
            interval = setInterval(function () {
                triggerPlay(currentIndex);
            }, options.time);
        }

        //trigger play
        function triggerPlay(cIndex) {
            var index;

            (cIndex == length - 1) ? index = 0 : index = cIndex + 1;
            play(index, options.mode);
            
        }

        //play
        function play(index, mode) {
            slidesWrapper.stop(true, true);
            slides.stop(true, true);

            mode == 'slide' ? (function () {
                if (index > currentIndex) {
                    slidesWrapper.animate({
                        left: '-=' + Math.abs(index - currentIndex) * childWidth + 'px'
                    }, delay);
                } else if (index < currentIndex) {
                    slidesWrapper.animate({
                        left: '+=' + Math.abs(index - currentIndex) * childWidth + 'px'
                    }, delay);
                } else {
                    return;
                }
            })() : (function () {
                if (slidesWrapper.children(':visible').index() == index) return;
                slidesWrapper.children().fadeOut(delay).eq(index).fadeIn(delay);
            })();

            try {
                controller.children('.' + cls).removeClass(cls);
                controller.children().eq(index).addClass(cls);
            } catch (e) { }

            currentIndex = index;

            options.exchangeEnd && typeof options.exchangeEnd == 'function' && options.exchangeEnd.call(this, currentIndex);
        }

        //stop
        function stop() {
            clearInterval(interval);
        }

        //prev frame
        function prev() {
            stop();

            currentIndex == 0 ? triggerPlay(length - 2) : triggerPlay(currentIndex - 2);

            isAuto && autoPlay();
        }

        //next frame
        function next() {
            stop();

            currentIndex == length - 1 ? triggerPlay(-1) : triggerPlay(currentIndex);

            isAuto && autoPlay();
        }

        //init
        init();

        //expose the Slider API
        return {
            prev: function () {
                prev();
            },
            next: function () {
                next();
            },
            triggerPlay: function(cIndex){
                triggerPlay(cIndex);
            }
        }
    };

}(jQuery, window, document));